import React, { memo, useEffect, useRef } from 'react'
import { useDispatch, useSelector, shallowEqual } from 'react-redux'

import { getNewAlbumAction } from '../../store/actionCreators';

import { Carousel } from 'antd'
import DThemeHeaderRCM from '@/components/theme-header-rcm'
import DAlbumCover from '@/components/album-cover'
import { NewAlubmWrapper } from "./style";


export default memo(function DNewAlbum() {

  // redux hooks
  const { newAlbums } = useSelector(state => ({
    newAlbums: state.getIn(["recommend", "newAlbums"])
  }), shallowEqual)

  const dispatch = useDispatch()

  // 其他hooks
  useEffect(() => {
    dispatch(getNewAlbumAction(10))
  }, [dispatch])

  const albumRef = useRef()

  return (
    <NewAlubmWrapper>
      <DThemeHeaderRCM title="新碟上架" />
      <div className="content">
        <button className="arrow arrow-left sprite_02" onClick={e => albumRef.current.prev()}></button>
        <div className="album">
          <Carousel dots={false} ref={albumRef}>
            {
              [0, 1].map(item => {
                return (
                  <div key={item} className="page">
                    {
                      newAlbums.slice(item * 5, (item + 1) * 5).map(iten => {
                        return (
                          <DAlbumCover key={iten.id} 
                                       info={iten} 
                                       size={100} 
                                       width={118}
                                       bgp="-570px"/>
                        )
                      })
                    }
                  </div>
                )
              })
            }
          </Carousel>
        </div>
        <button className="arrow arrow-right sprite_02" onClick={e => albumRef.current.next()}></button>
      </div>
    </NewAlubmWrapper>
  )
})
